﻿<!-- Background Pattern -->
<div class="bg-pattern bg-pattern_vertical"></div>
<!-- Backstretch Carousel -->
<div class="backstretch-carousel"></div>


<!-- Team screen -->
<div class="site-wrapper site-wrapper_team screen" id="team">
    <div class="site-wrapper__inner">
        <div class="cover-container animated bounceInDown">
            <h2 class="title">
                Project Portfolio
            </h2>
            <p class="title__sub-text">
                A display of my works.
            </p>
        </div>

        <div class="container">
            <div class="row">
                <div class="col-sm-12 animated tada">
                    <!-- Carousel -->
                    <div id="team__carousel" class="carousel slide" data-ride="carousel" data-interval="9999999">

                        <!-- Indicators -->
                        <ol class="carousel-indicators">
                            <li data-target="#team__carousel" data-slide-to="{{key}}" data-ng-repeat="(key, value) in projectList" ng-class="value.class"></li>
                        </ol>

                        <!-- Wrapper for slides -->
                        <div class="carousel-inner">
                            <!-- Item 1 -->
                            <div class="item {{project.class}}" data-ng-repeat="project in projectList">
                                <div class="cover-container">
                                    <div class="team-member__icon">
                                        <i class="fa fa-android fa-2x"></i>
                                    </div>
                                    <h2 class="team-member__title global-text-color popouthoverbtn">
                                        <a href="#Project/{{project.Id}}" style="text-decoration:none">{{project.Title}}</a>
                                    </h2>
                                    <h2 class="team-member__title"></h2>
                                    <p class="team-member__summary g-line-height-lg" style="color:black">
                                        {{project.Description}}
                                    </p>
                                </div>
                            </div>

                            <!-- Controls -->
                            <a id="leftc" class="left carousel-control" data-target="#team__carousel" role="button" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left"></span>
                            </a>
                            <a id="rightc" class="right carousel-control" data-target="#team__carousel" role="button" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right"></span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>